<template>
	<view class="content">
		<!-- <navbar :isHome="true" /> -->
		<!-- <view class="top_content">
			<view class="city">
				定位中
			</view>
			<view class="top_input">请输入...</view>
		</view> -->
		<top />
		<view v-if="slides && slides.length > 0" class="index-swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="4000" circular :duration="1000">
				<block v-for="(item,index) in slides" :key="index">
					<swiper-item>
						<image :src="item.pic_image_url" mode="widthFix" show-menu-by-longpress :data-index="index">
						</image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view v-if="nav2s && nav2s.length>0" class="nav2-list">
			<block v-for="(item,index) in nav2s" :key="index">
				<view class="nav2-item" @click="onNav2Tap" :data-index="index">
					<view class="nav2-pic">
						<image :src="item.pic_image_url" mode="widthFix"></image>
					</view>
				</view>
			</block>
		</view>
		<view v-if="navs && navs.length>0" class="nav-list">
			<block v-for="(item,index) in navs" :key="index">
				<view class="nav-item" @click="onNavTap" :data-index="index">
					<view class="nav-pic">
						<image :src="item.pic_image_url"></image>
					</view>
					<view class="nav-text" :style="'color:'+ (item.tcolor?item.tcolor:'')">{{item.title}}</view>
				</view>

			</block>
		</view>
		<view v-if="hospitalsList && hospitalsList.length>0" class="hospitals-list">

			<view class="hospital-item" @click="toHospital" v-for="(item,index) in hospitalsList" :key="index"
				:data-hid="item.id">
				<view class="hospital-pic">
					<image :src="item.avatar_url" mode="aspectFill"></image>
				</view>
				<view class="hospital-text">
					<span class="title">{{item.name}}</span>
					<span class="greenTitle">{{item.rank}} {{item.label}}</span>
					<span class="destor">{{item.intro}}</span>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		toRaw
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const app = getApp()
	// 定义轮播图数组
	const slides = ref([])
	// 快捷入口1
	const nav2s = ref([])
	// 快捷入口2
	const navs = ref([])
	const hospitalsList = ref([])
	onLoad(() => {
		app.globalData.utils.getUserInfo()
		app.globalData.utils.request({
			url: '/app/init',
			success: res => {
				const {
					id
				} = res.data.area
				// 通过id获取当前地区的页面数据
				app.globalData.utils.request({
					url: "/Index/index",
					data: {
						aid: id
					},
					success: ({
						data
					}) => {
						console.log(data);
						slides.value = data.slides
						nav2s.value = data.nav2s
						navs.value = data.navs
						hospitalsList.value = data.hospitals
					}
				})


			}
		})
	})
	const onNav2Tap = (e) => {
		console.log(e);
		const nav = toRaw(nav2s.value)[e.currentTarget.dataset.index]
		console.log(nav);
		jump(nav, 'nav2')
	}
	const onNavTap = (e) => {
		const nav = toRaw(navs.value)[e.currentTarget.dataset.index]
		jump(nav, 'navs')
	}

	const toHospital = (e) => {
		let hhid = e.currentTarget.dataset.hid
		uni.navigateTo({
			url: `../hospital/index?hid=${hhid}`
		})
	}
	const jump = (nav, type) => {
		if (nav.stype == 1) {
			uni.navigateTo({
				url: nav.stype_link
			})
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.index-swiper {
		z-index: 999;
		margin-top: 10rpx;
		padding: 0 10rpx;
		overflow: hidden;
		border-radius: 10rpx;
		height: 320rpx;
	}

	.index-swiper swiper {
		height: 320rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.index-swiper swiper image {
		width: 100%;
		height: 100%;
	}

	.nav2-list {
		margin: 10rpx 10rpx 0 10rpx;
	}

	.nav2-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav2-item {
		float: left;
		margin-top: 10rpx;
		width: 50%;
		text-align: center;
		box-sizing: border-box;
		padding: 0 5rpx;
	}

	.nav2-pic {
		width: 100%;
	}

	.nav2-pic image {
		display: block;
		width: 100%;
	}

	.nav-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav-item {
		float: left;
		margin-top: 20rpx;
		width: 20%;
		text-align: center;
		padding: 10rpx 0;
	}

	.nav-pic image {
		display: block;
		padding: 10rpx;
		border-radius: 5rpx;
		width: 110rpx;
		height: 110rpx;
	}

	.nav-text {
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
	}

	.hospitals-list {
		padding: 0 10rpx;
	}

	.hospital-item {
		margin: 30rpx 0;
		display: flex;

	}

	.hospital-pic {
		border-radius: 10rpx;
		padding: 5rpx;
		width: 220rpx;
		height: 190rpx;

	}

	.hospital-pic image {
		display: block;
		width: 200rpx;
		height: 190rpx;
	}

	.hospital-text {
		margin-left: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around
	}

	.hospital-text .title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;

	}

	.hospital-item .greenTitle {
		font-size: 32rpx;
		color: #56987D;
		font-weight: 800;
	}

	.hospital-item .destor {
		color: #ccc;
	}
</style>